<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>cart</title>
</head>
<body>
    <div id="app">
        <table border="1" align="center">
            <thead>
                <tr>
                    <th colspan="5">购物车</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <!-- 监听复选框变化 -->
                        <input 
                        type="checkbox"
                        v-model="checkAll" 
                        @change="checkedAll">
                        全选
                    </td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(clothse,index) in list">
                    <td>
                        <input type="checkbox"
                        @change="check"
                        v-model="clothse.ischecked">
                    </td>
                    <td>{{clothse.name}}</td>
                    <td>{{clothse.price}}</td>
                    <td>
                        <input type="text" v-model.number="clothse.num">
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td><button>我还要买</button></td>
                    <td>总计</td>
                    <td>{{money}}元</td>
                    <td>{{total}}件</td>
                    <td><button>结算</button></td>
                </tr>
            </tbody>
        </table>
        
    </div>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data(){
                return{
                    list: [
                        {
                            name: '雪纺衬衫', price: 139, 
                            num: 5, ischecked: false
                        },
                        {
                            name: '西装外套', price: 488, 
                            num: 2, ischecked: false
                        },
                        {
                            name: '高腰牛仔裤', price: 289, 
                            num: 2, ischecked: false
                        },
                    ],
                    checkAll: false
                }
            },
            computed: {
                money(){
                    let m = 0;
                    this.list.forEach(i =>{
                        m += i.price*i.num
                    });
                    return m;
                },
                total(){
                    let t = 0;
                    this.list.forEach(i =>{
                        t += i.num 
                    });
                    return t;
                }
            },
            methods: {
                del(index){
                    //删除商品
                    this.list.splice(index,1);
                },
                //全选
                checkedAll(){
                    this.list.forEach(item =>{
                        item.ischecked = this.checkAll
                    })
                },
				//单选
                check(){
                    this.checkAll = this.list.every(item => {
                        return item.ischecked
                    })
                    
                }
                    // let each = this.list.every(item =>{
                    //     item.checked = true;
                    // });
                    // if(each == true){
                    //     this.allChecked == false;
                    // }
            }
        })
    </script>
</body>
</html>